<template>
    <div id="app">
        <RouterView v-slot="{ Component }">
            <Transition name="fade" mode="out-in">
                <component :is="Component" />
            </Transition>
        </RouterView>
    </div>
</template>

<script setup>
import { RouterView } from 'vue-router'
</script>

<style>
@import './assets/styles/variables.css';
@import './assets/styles/base.css';

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* 全局尺寸控制 */
#app {
    min-height: 100vh;
    color: var(--text-primary);
    background-color: var(--bg-primary);
}
</style>
